{
  "properties" : { },
  "id" : "a6ef3bf9fe5c4ca79708f8c5d509432b",
  "script" : null,
  "groupId" : "ea55584b076149d0b62e309b156a9202",
  "name" : "role.html",
  "createTime" : null,
  "updateTime" : 1738515006888,
  "lock" : null,
  "createBy" : null,
  "updateBy" : "可辉",
  "path" : "role.html"
}
================================
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息</title>
    <link rel="stylesheet" href="/plugs/layui/css/layui.css" />
    <style>
      html, body { height: 100% }
      .layui-table .layui-form-select .layui-input{ height: 28px }
    </style>
</head>
<body class="layui-padding-2">

  <table class="layui-hide" id="ID-defTable"></table>

  <script type="text/html" id="TPL-table-tools">
    <div class="layui-btn-container">
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateMenu">更新菜单</a>
    </div>
  </script>


  <script src="/plugs/layui/layui.js"></script>
  <script type="text/javascript">
    layui.use(function(){
      var treeTable = layui.treeTable;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var $ = layui.jquery;

      var defTable;
      var defTableId = 'ID-defTable';
      var menuTreeTable;
      var menuTreeTableId = 'ID-menuTreeTable';

      // table 事件 - 初始化
      defTable = table.render({
          elem: '#'+defTableId,
          url: '/api/system/role/list',
          response: {statusCode: 200, dataName: 'data'}, page: true,
          cols: [[
            {type: 'checkbox', templet: '#TPL-defTable-checkbox'},
            {field: 'roleId', title: 'id', hide: false, width: 110},
            {field: 'roleName', title: 'roleName'},
            {field: 'roleCode', title: 'roleCode'},
            {field: 'sort', title: 'sort', width: 70},
            {field: 'status', title: '启用', width: 120},
            {fixed: "right", title: "操作", align: "center", toolbar: "#TPL-table-tools", width: 130} 
          ]],
          parseData: function(res){
            return {
              "code": res.code,
              "msg": res.msg,
              "count": res.data.total,
              "data": res.data.list
            };
          }
      });

      // 表头工具栏工具事件
      table.on('tool('+ defTableId +')', function (obj) {
        var trData = obj.data;
        if (obj.event === 'updateMenu'){
          layer.open({
            title: false, type: 1, area: ['650px', '540px'],
            content: '<table id="ID-menuTreeTable"></table>',
            btn: ['提交'],
            btn1: function(index, layero, that){
              var postMenus = treeTable.checkStatus(menuTreeTableId, true).data.map(item => item.menuId);

              var postData = {
                "roleId": trData.roleId,
                "menus": postMenus
              }
              $.ajax({
                url: '/api/system/role/menu/add', type: 'POST', contentType: "application/json", data: JSON.stringify(postData),
                success: function(res){
                  layer.closeAll();
                  if(res.code === 200){
                    layer.msg(res.msg, { icon: 1 });
                  } else {
                    layer.alert(res.msg, { icon: 5});
                  }
                },
                error: function(res, msg){layer.msg('error');}
              });
            }
          });
          menuTreeTable = layui.treeTable.render({
              elem: '#'+menuTreeTableId, url: '/api/system/menu/tree',
              tree: {
                customName: {
                  children: 'children', name: 'menuName', id: 'menuId', pid: 'parentId', icon: 'icon'
                },
                data: { rootPid: 'parentId' }, view: { icon: 'layui-icon layui-icon-addition' }
              },
              height: 'full', response: {statusCode: 200},
              cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'menuId', title: 'id', hide: true},
                {field: 'menuName', title: 'menuName', width: '100%'}
              ]],
              page: false,
              done: function(res, curr, count){
                // 展开
                treeTable.expandAll(menuTreeTableId, true);
                // 标记选中
                $.ajax({
                  url: '/api/system/role/menu', type: 'GET', data: {roleId: trData.roleId},
                  success: function(res){
                    if(res.code === 200){
                      var menudatas = res.data;
                      $('[lay-table-id="'+menuTreeTableId+'"]  tbody tr').each(function(index, row){
                        var menuId = $(row).find('td[data-field="menuId"]').text().trim();
                        if (menudatas.some(item => item.menuId == menuId)) {
                          layui.treeTable.setRowChecked(menuTreeTableId, {index:$(row).data('index'),checked: true});
                        }
                      });
                    }
                  },
                  error: function(res, msg){defTable.reloadData();layer.msg('error');}
                });
              }
          });
          
        }
      });
    });
      

  </script>
</body>
</html>